<template>
    <basic-container>
        <span class="primary my-2 w-full text-center" style="font-size: 14px; display: inline-block">
            <span class="danger">*</span>
            该界面功能：对被攻击IP进行统计，记录首次被攻击时间和最新被攻击时间，IP归属国、省、市，人
        </span>
        <el-form :inline="true" :model="query" class="mx-2" size="small">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="发起攻击IP区域">
                        <el-switch
                                @change="changeAttackerProvince"
                                style="margin-bottom: 3px"
                                :size="size"
                                v-model="query.onlySd"
                                active-text="仅山东"
                                inactive-text="全部">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="被攻击情况">
                        <el-switch
                                @change="changeAttackedStatus"
                                style="margin-bottom: 3px"
                                :size="size"
                                v-model="query.onlyLoginSuccess"
                                active-text="仅被攻击成功"
                                inactive-text="全部">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="被攻击IP国家/省/市">
                        <country-province-city-cascader v-model="query.countryProvinceCity"></country-province-city-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-tooltip class="item" effect="dark" content="多个IP用英文逗号分割，下钻发起攻击IP时会同时查询符合条件的发起攻击IP，默认只查询被攻击IP" placement="top-start">
                        <el-form-item label="IP">
                            <el-input style="width: 300px" v-model="query.ips" placeholder="192.168.1.100,192.168.1.101" clearable></el-input>
                        </el-form-item>
                    </el-tooltip>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item>
                        <drilling-selector :selector-option="selectorOption"></drilling-selector>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   v-model="form"
                   ref="crud"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
            <template slot="menu" slot-scope="{row, type, size}">
                <el-button :size="size" :type="type" icon="el-icon-view" @click="attackDetail(row)">查看攻击者详情</el-button>
            </template>
            <template slot="menuLeft">
                <excel-export v-bind="excelExportProps"></excel-export>
            </template>
        </avue-crud>
        <el-drawer
                size="40%"
                append-to-body
                title="攻击者详情"
                :visible.sync="drawer">
            <el-scrollbar>
                <template v-if="attackList.length > 0">
                    <el-card shadow="hover" v-for="item in attackList" :key="item.id" class="px-4 my-2 mx-8">
                        <p>
                            <span class="px-2">被攻击IP：<el-tag size="small">{{item.attackedIp}}</el-tag></span>
                            <span class="px-2">被攻击城市：<el-tag size="small">{{item.attackedCity || '未知'}}</el-tag></span>
                        </p>
                        <p>
                            <span class="px-2">发起攻击国家：<el-tag type="danger" size="small">{{item.attackerCountry=='中国'?'境内':item.attackerCountry}}</el-tag></span>
                            <span class="px-2">发起攻击城市：<el-tag type="danger" size="small">{{item.attackerCity || '未知'}}</el-tag></span>
                        </p>
                        <p>
                            <span class="px-2">被攻击次数：<span class="danger" style="font-weight: bold">{{item.attackedNum}}</span></span>
                            <span class="px-2">登录成功次数：<span class="success" style="font-weight: bold">{{item.loginSuccessNum}}</span></span>
                        </p>
                        <p>
                            <span class="px-2">首次攻击时间：<span class="primary" >{{item.firstAttackedTime}}</span></span>
                            <span class="px-2">最近一次攻击时间：<span class="primary" >{{item.latestAttackedTime}}</span></span>
                        </p>
                    </el-card>
                </template>
            </el-scrollbar>
        </el-drawer>
    </basic-container>
</template>

<script>
  import {detail, getList} from "@/youan/api/attacked_attacker_ip_detail/attackedAttackerIpDetail";
  import excelExport from "@/youan/components/excel/excel-export";
  import DrillingSelector from "../statistics/components/drilling-selector";
  import CountryProvinceCityCascader from "../../../components/form/country-province-city-cascader";

  export default {
    components: {CountryProvinceCityCascader, DrillingSelector, excelExport},
    data() {
      return {
        form: {},
        query: {
          onlySd: false,
          onlyLoginSuccess: false,
          countryProvinceCity: [],
          ips: ""
        },
        loading: true,
        drawer: false,
        excelExportProps: {
          exportUrl: "/api/attacked_attacker_ip_detail/exportAttackedIpDetailExcel",
          prepareQuery: this.prepareQuery,
          loadingText: "",
          excelName: "被攻击IP时间信息"
        },
        page: {
          pageSize: 50,
          currentPage: 1,
          total: 0
        },
        data: [],
        attackList: [],
        showOperation: true,
        drillingSelectorList: [],
        selectorOption: [
          {
            label: "发起攻击IP",
            prop: "attacker_ip",
            value: false,
          }
        ]
      };
    },
    computed: {
      option: function() {
        return {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          delBtn: false,
          editBtn: false,
          dialogClickModal: false,
          addBtn: false,
          column: [
            {
              label: "",
              prop: "id",
              hide: true
            },
            {
              label: "被攻击IP",
              prop: "attackedIp",
            },
            {
              label: "发起攻击IP",
              prop: "attackerIp",
              hide: !this.drillingSelectorList.includes("attacker_ip")
            },
            {
              label: "首次被攻击时间",
              prop: "firstAttackedTime",
            },
            {
              label: "最近一次被攻击时间",
              prop: "latestAttackedTime",
            },
            {
              label: "被攻击IP所在国家",
              prop: "attackedCountry",
            },
            {
              label: "被攻击IP所在省份",
              prop: "attackedProvince",
            },
            {
              label: "被攻击IP所在城市",
              prop: "attackedCity",
            },
            {
              label: "登录成功次数",
              width: 120,
              prop: "loginSuccessNum",
            },
            /*{
              label: "",
              prop: "user",
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },*/
          ]
        }
      },
    },
    methods: {
      searchChange() {
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        if(this.query.onlySd) {
          params.attackerProvince = "山东";
        }
        if(this.drillingSelectorList.length > 0) {
          params.groupBy = this.drillingSelectorList.join(",")
        }
        if(this.query.countryProvinceCity) {
          params.attackedCountry = this.query.countryProvinceCity[0] || "";
          params.attackedProvince = this.query.countryProvinceCity[1] || "";
          params.attackedCity = this.query.countryProvinceCity[2] || "";
        }
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });
      },
      async attackDetail(row) {
        this.drawer = true;
        const result = await detail({attackedIp: row.attackedIp, attackerIp: row.attackerIp})
        if(result.data.success) {
            this.attackList = result.data.data;
        }
      },
      changeAttackerProvince() {
        this.onLoad(this.page);
      },
      changeAttackedStatus() {
        this.onLoad(this.page);
      },
      prepareQuery() {
        let params = {};
        if(this.query.onlySd) {
          params.attackerProvince = "山东";
        }
        params.onlyLoginSuccess = this.query.onlyLoginSuccess;
        if(this.drillingSelectorList.length > 0) {
          params.groupBy = this.drillingSelectorList.join(",")
        }
        if(this.query.countryProvinceCity) {
          params.attackedCountry = this.query.countryProvinceCity[0] || "";
          params.attackedProvince = this.query.countryProvinceCity[1] || "";
          params.attackedCity = this.query.countryProvinceCity[2] || "";
        }
        return params;
      }
    },
    activated() {
      this.$nextTick(() => {
        if (this.$refs.crud.$refs.table) {
          this.$refs.crud.$refs.table.doLayout();
        }
      })
    },
    watch: {
      selectorOption: {
        handler: function (newVal) {
          this.drillingSelectorList = [];
          // 收集当前选中的下钻项
          for(let item of newVal) {
            if(item.value) {
              this.drillingSelectorList.push(item.prop)
            }
          }

          if(this.drillingSelectorList.length == 0) {
            this.showOperation = true;
          }else {
            this.showOperation = false;
          }
          this.page.currentPage = 1;
          this.onLoad(this.page);
        },
        deep: true
      }
    }
  };
</script>

<style>
</style>
